<template>
    <button @click="isshow=true">打开模态框</button>
     <Teleport to="body">
        <div class="dialogBox" v-if="isshow">
            <div class="closebtn" @click="isshow=false">&times;</div>
        </div>
     </Teleport>
</template>

<script>
import { ref } from '@vue/reactivity'
export default {
    setup(){
        let isshow=ref(false)
        return{
            isshow
        }
    }
}
</script>

<style>
    .dialogBox{
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
        width: 300px;
        height: 400px;
        background-color: orange;
    }
    .closebtn{
        position:absolute;
        top: 5px;
        right: 5px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        cursor: pointer;
    }
</style>